<template>
    <div class="car-boxes" id="rank_box">
        <div class="car-box j-col">
            <div class="t-head d-flex align-center">
                <img src="~@/assets/list_huo.png" class="j-img" width="20" height="20" />
                <div class="m-tip1 c-title-2">
                    <!-- 熱門榜 -->
                    {{ $t("message.Rank.a") }}
                </div>
                <div class="more-btn d-flex align-center" @click="onJump('HOT')">
                    <div class="more m-tip2 main-colors c-title-4">
                        <!-- 更多 -->
                        {{ $t("message.Rank.b") }}
                    </div>
                    <span class="iconfont icon-gengduo"></span>
                </div>
            </div>
            <div class="tds tds-hd sm d-flex justify-space-between align-center">
                <div class="ts ts-1 c-title-5">
                    <!-- 幣種 -->
                    <span class="t-tit">{{ $t("message.Rank.c") }}</span>
                </div>
                <div class="ts ts-2 c-title-5">
                    <!-- 最新價 -->
                    {{ $t("message.Rank.d") }}
                </div>
                <div class="ts ts-3 c-title-5">
                    <!-- 漲跌幅 -->
                    {{ $t("message.Rank.e") }}
                </div>
            </div>
            <div class="tds d-flex justify-space-between align-center" v-for="(item, i) in HOT" :key="item.key">
                <div class="ts ts-1 d-flex align-center justify-space-between c-title-4" @click="onCoin(item.s)">
                    <span class="c-title-4">{{ i + 1 }}</span>
                    <img :src="getImg(item.s)" class="j-ico" @error="loadErr"/>
                    <span class="b-txt c-title-4" :title="item.s">
                        <span class="name">{{ commFun.getForm(true, item.s) }}</span>
                        <span class="c-clor">/{{ commFun.getForm(false, item.s) }}</span>
                    </span>
                </div>
                <div class="ts ts-2">
                    <p class="c-title-4">{{ item.c }}</p>
                    <!-- <p class="text-disabled">{{ item.Q }}</p> -->
                </div>
                <div class="ts ts-3 d-flex align-center justify-end">
                    <Arrow :up="item.P > 0" :size="4" :txt="item.P + '%'"></Arrow>
                </div>
            </div>
        </div>

        <div class="car-box j-col">
            <div class="t-head d-flex align-center">
                <img src="~@/assets/list_rise.png" class="j-img" width="20" height="20" />
                <div class="m-tip1 c-title-2">
                    <!-- 漲幅榜 -->
                    {{ $t("message.Rank.f") }}
                </div>
                <div class="more-btn d-flex align-center" @click="onJump('UP')">
                    <div class="more m-tip2 main-colors c-title-4">
                        <!-- 更多 -->
                        {{ $t("message.Rank.g") }}
                    </div>
                    <span class="iconfont icon-gengduo"></span>
                </div>
            </div>
            <div class="tds tds-hd d-flex justify-space-between align-center">
                <div class="ts ts-1 c-title-5">
                    <!-- 幣種 -->
                    <span class="t-tit">{{ $t("message.Rank.h") }}</span>
                </div>
                <div class="ts ts-2 c-title-5">
                    <!-- 最新價 -->
                    {{ $t("message.Rank.i") }}
                </div>
                <div class="ts ts-3 c-title-5">
                    <!-- 今日涨幅 -->
                    {{ $t("message.Rank.j") }}
                </div>
            </div>
            <div class="tds d-flex justify-space-between align-center" v-for="(item, i) in UP" :key="item.key">
                <div class="ts ts-1 d-flex align-center justify-space-between" @click="onCoin(item.s)">
                    <span class="c-title-4">{{ i + 1 }}</span>
                    <img :src="getImg(item.s)" class="j-ico" @error="loadErr"/>
                    <span class="b-txt c-title-4" :title="item.s">
                        <!-- {{ commFun.getForm(true, item.s) }}/ {{ commFun.getForm(false, item.s) }}   -->
                        <span class="name">{{ commFun.getForm(true, item.s) }}</span>
                        <span class="c-clor">/{{ commFun.getForm(false, item.s) }}</span>
                    </span>
                </div>
                <div class="ts ts-2">
                    <p class="c-title-4">{{ item.c }}</p>
                    <!-- <p class="text-disabled">{{ item.Q }}</p> -->
                </div>
                <div class="ts ts-3 d-flex align-center justify-end">
                    <Arrow :up="item.P > 0" :size="4" :txt="item.P + '%'"></Arrow>
                </div>
            </div>
        </div>

        <div class="car-box j-col">
            <div class="t-head d-flex align-center">
                <img src="~@/assets/list_fall.png" class="j-img" width="20" height="20" />
                <div class="m-tip1 c-title-2">
                    <!-- 跌幅榜 -->
                    {{ $t("message.Rank.k") }}
                </div>
                <div class="more-btn d-flex align-center" @click="onJump('DOWN')">
                    <div class="more m-tip2 main-colors c-title-4">
                        <!-- 更多 -->
                        {{ $t("message.Rank.n") }}
                    </div>
                    <span class="iconfont icon-gengduo"></span>
                </div>
            </div>
            <div class="tds tds-hd d-flex justify-space-between align-center">
                <div class="ts ts-1 c-title-5">
                    <!-- 幣種 -->
                    <span class="t-tit">{{ $t("message.Rank.m") }}</span>
                </div>
                <div class="ts ts-2 c-title-5">
                    <!-- 最新價 -->
                    {{ $t("message.Rank.l") }}
                </div>
                <div class="ts ts-3 c-title-5">
                    <!-- 今日跌幅 -->
                    {{ $t("message.Rank.y") }}
                </div>
            </div>
            <div class="tds d-flex justify-space-between align-center" v-for="(item, i) in DOWN" :key="item.key">
                <div class="ts ts-1 d-flex align-center justify-space-between" @click="onCoin(item.s)">
                    <span class="c-title-4">{{ i + 1 }}</span>
                    <img :src="getImg(item.s)" class="j-ico" @error="loadErr"/>
                    <span class="b-txt c-title-4" :title="item.s">
                        <!-- {{ commFun.getForm(true, item.s) }}/ {{ commFun.getForm(false, item.s) }} -->
                        <span class="name">{{ commFun.getForm(true, item.s) }}</span>
                        <span class="c-clor">/{{ commFun.getForm(false, item.s) }}</span>
                    </span>
                </div>
                <div class="ts ts-2">
                    <p class="c-title-4">{{ item.c }}</p>
                    <!-- <p class="text-disabled">{{ item.Q }}</p> -->
                </div>
                <div class="ts ts-3 d-flex align-center justify-end">
                    <Arrow :up="item.P > 0" :size="4" :txt="item.P + '%'"></Arrow>
                </div>
            </div>
        </div>

        <div class="car-box j-col" v-if="false">
            <div class="t-head d-flex align-center">
                <img src="~@/assets/list_new.png" class="j-img" width="20" height="20" />
                <div class="m-tip1 c-title-2">
                    <!-- 新幣榜 -->
                    {{ $t("message.Rank.z") }}
                </div>
                <div class="more-btn d-flex align-center" @click="onJump('NEW')">
                    <div class="more m-tip2 main-colors c-title-4">
                        <!-- 更多 -->
                        {{ $t("message.Rank.aa") }}
                    </div>
                    <span class="iconfont icon-gengduo"></span>
                </div>
            </div>
            <div class="tds tds-hd d-flex justify-space-between align-center">
                <div class="ts ts-1 c-title-5">
                    <!-- 幣種 -->
                    <span class="t-tit">{{ $t("message.Rank.bb") }}</span>
                </div>
                <div class="ts ts-2 c-title-5">
                    <!-- 最新價 -->
                    {{ $t("message.Rank.cc") }}
                </div>
                <div class="ts ts-3 c-title-5">
                    <!-- 漲跌幅 -->
                    {{ $t("message.Rank.dd") }}
                </div>
            </div>
            <div class="tds d-flex justify-space-between align-center" v-for="(item, i) in NEW" :key="item.key">
                <div class="ts ts-1 d-flex align-center justify-space-between" @click="onCoin(item.s)">
                    <span class="c-title-4">{{ i + 1 }}</span>
                    <img :src="getImg(item.s)" class="j-ico" />
                    <span class="b-txt c-title-4" :title="item.s">
                        <!-- {{ commFun.getForm(true, item.s) }}/ {{ commFun.getForm(false, item.s) }}     -->
                        <span class="name">{{ commFun.getForm(true, item.s) }}</span>
                        <span class="c-clor">/{{ commFun.getForm(false, item.s) }}</span>
                    </span>
                </div>
                <div class="ts ts-2">
                    <p class="c-title-4">{{ item.c }}</p>
                    <!-- <p class="text-disabled">{{ item.Q }}</p> -->
                </div>
                <div class="ts ts-3 d-flex align-center justify-end">
                    <Arrow :up="item.P > 0" :size="4" :txt="item.P + '%'"></Arrow>
                </div>
            </div>
        </div>

        <div class="car-box j-col">
            <div class="t-head d-flex align-center">
                <img src="~@/assets/list_Volatility.png" class="j-img" width="20" height="20" />
                <div class="m-tip1 c-title-2">
                    <!-- 波動率榜 -->
                    {{ $t("message.Rank.ee") }}
                </div>
                <div class="more-btn d-flex align-center" @click="onJump('VOLATILITY')">
                    <div class="more m-tip2 main-colors c-title-4">
                        <!-- 更多 -->
                        {{ $t("message.Rank.ff") }}
                    </div>
                    <span class="iconfont icon-gengduo"></span>
                </div>
            </div>
            <div class="tds tds-hd d-flex justify-space-between align-center">
                <div class="ts ts-1 c-title-5">
                    <!-- 幣種 -->
                    <span class="t-tit">{{ $t("message.Rank.gg") }}</span>
                </div>
                <div class="ts ts-2 c-title-5">
                    <!-- 最新價 -->
                    {{ $t("message.Rank.hh") }}
                </div>
                <div class="ts ts-3 c-title-5">
                    <!-- 波動率 -->
                    {{ $t("message.Rank.ii") }}
                </div>
            </div>
            <div class="tds d-flex justify-space-between align-center" v-for="(item, i) in VOLATILITY" :key="item.key">
                <div class="ts ts-1 d-flex align-center justify-space-between" @click="onCoin(item.s)">
                    <span class="c-title-4">{{ i + 1 }}</span>
                    <img :src="getImg(item.s)" class="j-ico" @error="loadErr"/>
                    <span class="b-txt c-title-4" :title="item.s">
                        <!-- {{ commFun.getForm(true, item.s) }}/ {{ commFun.getForm(false, item.s) }}     -->
                        <span class="name">{{ commFun.getForm(true, item.s) }}</span>
                        <span class="c-clor">/ {{ commFun.getForm(false, item.s) }}</span>
                    </span>
                </div>
                <div class="ts ts-2">
                    <!-- <JNumber :num="item.c" price></JNumber> -->
                    <p class="c-title-4">{{ item.c }}</p>
                    <!-- <p class="text-disabled">{{ item.Q }}</p> -->
                </div>
                <div class="ts ts-3 d-flex align-center justify-end">
                    <Arrow :up="item.volatility > 0" :size="4" :txt="item.volatility + '%'"></Arrow>
                </div>
            </div>
        </div>

        <div class="car-box j-col" v-if="false">
            <div class="t-head d-flex align-center">
                <img src="~@/assets/list_Turnover.png" class="j-img" width="20" height="20" />
                <div class="m-tip1 c-title-2">
                    <!-- 成交額榜 -->
                    {{ $t("message.Rank.jj") }}
                </div>
                <div class="more-btn d-flex align-center" @click="onJump('TURNOVER')">
                    <div class="more m-tip2 main-colors c-title-4">
                        <!-- 更多 -->
                        {{ $t("message.Rank.kk") }}
                    </div>
                    <span class="iconfont icon-gengduo"></span>
                </div>
            </div>
            <div class="tds tds-hd d-flex justify-space-between align-center">
                <div class="ts ts-1 c-title-5">
                    <!-- 幣種 -->
                    <span class="t-tit">{{ $t("message.Rank.ll") }}</span>
                </div>
                <div class="ts ts-2 c-title-5">
                    <!-- 24H成交额 -->
                    {{ $t("message.Rank.mm") }}
                </div>
                <div class="ts ts-3 c-title-5">
                    <!-- 今日漲幅 -->
                    {{ $t("message.Rank.nn") }}
                </div>
            </div>
            <div class="tds d-flex justify-space-between align-center" v-for="(item, i) in TURNOVER" :key="item.key">
                <div class="ts ts-1 d-flex align-center justify-space-between" @click="onCoin(item.s)">
                    <span class="c-title-4">{{ i + 1 }}</span>
                    <img :src="getImg(item.s)" class="j-ico" />
                    <span class="b-txt c-title-4" :title="item.s">
                        <!-- {{ commFun.getForm(true, item.s) }}/ {{ commFun.getForm(false, item.s) }}     -->
                        <span class="name">{{ commFun.getForm(true, item.s) }}</span>
                        <span class="c-clor">/ {{ commFun.getForm(false, item.s) }}</span>
                    </span>
                </div>
                <div class="ts ts-2">
                    <p class="c-title-4">{{ formatBigNumber(item.q) }}</p>
                    <!-- <p class="text-disabled">{{ formatBigNumber(item.n) }}</p> -->
                </div>
                <div class="ts ts-3 d-flex align-center justify-end">
                    <Arrow :up="item.P > 0" :size="4" :txt="item.P + '%'"></Arrow>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import Arrow from "@/components/arrow2/index.vue";
import JNumber from "@/components/j-number/index.vue";
import { reactive, computed } from "vue";
import { useRank } from "@/stores/rank";

import { formatBigNumber } from "@/comm/format";
import { useRouter } from "vue-router";
import { useTokens } from "@/stores/tokens";
import { URL_AVATAR } from "@/comm/api";
import { useKline } from "@/stores/kline";
import { commFun } from "@/views/ranks/script/comm";
import { useCore } from "@/hooks/useCore";
const core = useCore();
const rank = useRank();
const total = 3;
const router = useRouter();
const tokens = useTokens();
const kline = useKline();

const getImg = (str: string) => {
    return tokens.getImg(str);
};
function loadErr(e:any){
    // console.log("err111111")
    // e.target.src = "https://alpha.chainingview.io/coin.svg"
    e.target.src="/coin.svg"
}
const onCoin = (str: string) => {
    // window.open("/coin/" + str);
    core.switchCoinByName(str);
};
const onJump = (str: string) => {
    console.log(str);
    localStorage.setItem("ranks", str);
    router.push("/ranks/" + str.toLowerCase());
};

const onDetail = (coin: string) => {
    // router.push({path: "/coinDetail", query: {coin}});
    kline.saveLastData();
    // router.push({name: "coin", params: {id: coin}})
    // window.open("/coin/" + coin);
    router.push(`/coin/${coin}`);

};

const HOT = computed(() => {
    if (rank.HOT && rank.HOT.length) {
        return rank.HOT.slice(0, total);
    }
    return [];
});
const UP = computed(() => {
    if (rank.UP && rank.UP.length) {
        return rank.UP.slice(0, total);
    }
    return [];
});
const DOWN = computed(() => {
    if (rank.DOWN && rank.DOWN.length) {
        return rank.DOWN.slice(0, total);
    }
    return [];
});
const NEW = computed(() => {
    if (rank.NEW && rank.NEW.length) {
        return rank.NEW.slice(0, total);
    }
    return [];
});
const TURNOVER = computed(() => {
    if (rank.TURNOVER && rank.TURNOVER.length) {
        return rank.TURNOVER.slice(0, total);
    }
    return [];
});
const VOLATILITY = computed(() => {
    if (rank.VOLATILITY && rank.VOLATILITY.length) {
        return rank.VOLATILITY.slice(0, total);
    }
    return [];
});

const props = defineProps(["list"]);
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
